<!-- 图库首页 -->
<template>
  <a-form ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item>
      <template slot="label">
        <span class="ant-form-item-required">
          大屏TV背景色系
        </span>
      </template>
      <a-radio-group v-model="form.colorType">
        <a-radio :value="1">
          系统
        </a-radio>
        <a-radio :value="2">
          自定义
        </a-radio>
      </a-radio-group>
      <div v-if="form.colorType == 1">
        <a-switch checked-children="黑" class="antd-switch-content" un-checked-children="白"  default-checked />
      </div>
      <div v-else>
        <span>背景颜色</span>
        <a-input type="color" width="20%" v-model="form.color"/>
        <span>&nbsp;{{form.color}}</span>
      </div>
    </a-form-item>

    <a-form-item>
      <template slot="label">
        <span class="ant-form-item-required">
          上传logo
        </span>
      </template>
      <upload-image v-model="form.imgAddrLog"></upload-image>

      <div>
        <span>温馨提示</span>
        <p>
          此logo为登录成功后在左上角显示的logo图片，高度为60像素，建议格式为.png/.jpg/.jepg
        </p>
      </div>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 7 }">
      <a-button type="primary" @click="handleSubmit">
        {{isNew?'保存':'修改'}}
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { BASE_URL } from '@/axios/config'
export default {
  name: 'GalleryStyle',
  directives: {},
  filters: {},
  mixins: [],
  model: {},
  props: {},
  data () {
    return {
      labelCol: { span: 7 },
      wrapperCol: { span: 11 },
      form: {
        colorType: 1,
        color: '#000',
        imgAddrLog: ''
      },
      fileList: '',
      isNew: true,
      id: '',
      BASE_URL: BASE_URL
    }
  },
  computed: {},
  watch: {},
  beforeCreate () {},
  created () {
    this.queryStyle()
  },
  beforeMount () {},
  mounted () {},
  beforeUpdate () {},
  updated () {},
  activated () {},
  deactivated () {},
  beforeDestroy () {},
  destroyed () {},
  // 方法集合
  methods: {
    handleChange (info) {
      this.form.imgAddrLog = info
    },
    queryStyle () {
      this.$get('/shop/style/query').then((res) => {
        if (res && res.returnCode == 1000) {
          if (!res.dataInfo && !res.dataInfo.colorType) return this.isNew = true
          this.isNew = false
          this.form.colorType = res.dataInfo?.colorType
          this.form.color = res.dataInfo?.color
          this.form.imgAddrLog = res.dataInfo?.imgAddrLog
          this.fileList = res.dataInfo?.imgAddrLog
          console.log(this.fileList)
          this.id = res.dataInfo?.id
        } else {
          this.isNew = true
        }
      })
    },
    handleSubmit () {
      let url = this.isNew ? '/shop/style/add' : '/shop/style/update'
      this.$post(url, { id: this.id, ...this.form }).then((res) => {
        if (res && res.returnCode == 1000) {
          this.queryStyle()
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
/deep/.antd-switch-content{
  &.ant-switch-checked{
    background-color: #000!important;
  }
}
</style>
